<template>
  <div>
        <Header></Header>
        <div class="box">
            <h3>管理员列表</h3>
            <template>
                <el-table  style="width: 80%"  :data="rowsData" >
                    <el-table-column prop="_id" label="编号" width="300"  align="center"> </el-table-column>
                    <el-table-column prop="realname" label="管理员姓名" width="150"  align="center"> </el-table-column>
                     <el-table-column prop="account" label="登录账户" width="150"  align="center"> </el-table-column>
                    <el-table-column prop="telephone" label="管理员手机号" width="150"  align="center"> </el-table-column>
                    <el-table-column align="center" label="管理员操作">
                        <template slot-scope="scope">
                               <el-button size="mini" type="danger" @click="deleteData(scope.row._id)">删除</el-button>
                         </template>
                     </el-table-column>
                </el-table>
            </template>
        </div>
    
        <!-- <div class="row" style="text-align: center;">
             <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page=" pageData.currentPage"
                :page-sizes="[3, 5, 7, 10]"
                :page-size="pageData.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total - 0">
             </el-pagination>
         </div> -->
    </div>
</template>

<script>
import Header from '../common/Header.vue'
import {createNamespacedHelpers} from 'vuex'
const{ mapState,mapActions} = createNamespacedHelpers('admin')
export default {
    components:{
        Header
    },
    data() {
        return {
           
        }
    },
    created() {
        this.getDataAsync()
    },
    computed:{
        ...mapState(['rowsData'])
    },
    methods: {
        ...mapActions(['getDataAsync','deleteDataAsync']),
         async deleteData(_id){
          const data = await this.deleteDataAsync(_id)
        //   console.log('data',data);
          if (data.code == 200) {
               this.getDataAsync()
          }
        },
    },
}
</script>

<style scoped lang='scss'>
h3 {
    color: #999;
    margin: 20px 0;
}
.el-select{
    width: 435px;
}
.el-button {

    background-color: rgb(202, 219, 248);
    border-color: rgb(202, 219, 248);
    &:hover{
         background-color: rgb(202, 219, 248);
         border-color: rgb(202, 219, 248);
    }
}
.avatar-uploader, .el-upload {
    border: 2px dashed red;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.avatar-uploader ,.el-upload:hover {
    border-color: #409eff;
}
.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}
.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>